<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" id="input" accept="image/png,image/jpeg">
    <img src="" alt="服务器渲染的图片" id="img">
</body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
var input = document.querySelector("#input")
var img = document.querySelector("#img")
input.addEventListener("change",function(e){
    console.log(e.target.files);//这是个为数组元素
    Array.from(e.target.files).map((f,i)=>{
        let formData = new FormData();
        formData.append("file",f);
        axios.post("http://localhost:3000/uploadImg",formData).then(res=>{
                console.log(res.data)
                // console.log(res.data);
                let img_url = "http://localhost:4001/uploadimg/"+res.data.url;
                img.setAttribute("src",img_url);
                console.log(img.src);
            }).catch(err=>console.log(err))
    })
    
})

</script>

</html>